<template>
    <NavBar title="我的" />
    <div class="my">

        <div class="my-row1">
            <img v-lazy="baseUrl + avatar" alt="">
            <div>
                <h5>{{ phone }}</h5>
                <p>姓名: {{ name ? name : '暂无数据' }}</p>
                <p>用户类型: {{ role_id === 1 ? '医师' : '患者' }}</p>
                <p v-if="role_id === 1">医疗机构: {{ bus_title ? bus_title : '暂无' }}</p>
            </div>
        </div>
        <ul class="my-row2">
            <li>
                <div>0</div>
                <div>获赞</div>
            </li>
            <li>
                <div>0</div>
                <div>粉丝</div>
            </li>
            <li>
                <div>0</div>
                <div>关注</div>
            </li>
            <li v-if="role_id === 1">
                <router-link class="person-home" :to="`/personHome?id=${id}`">个人主页</router-link>
            </li>
        </ul>
        <ul class="my-row3">
            <li @click="goPersonInfo">
                <span class="icon-type iconfont icon-iconfonticon-mima"></span>
                个人信息
                <span class="arrow-right iconfont icon-iconfontright"></span>
            </li>
            <li @click="$router.push('/myAppoint')">
                <span class="icon-type iconfont icon-iconfontuser"></span>
                {{ role_id === 1 ? '我的病人' : '我的医生' }}
                <span class="arrow-right iconfont icon-iconfontright"></span>
            </li>
            <li @click="$router.push('/myAppoint')">
                <span class="icon-type iconfont icon-iconfontrili"></span>
                我的预约
                <span class="arrow-right iconfont icon-iconfontright"></span>
            </li>

            <li>
                <span class="icon-type iconfont icon-iconfont1"></span>
                关于我们
                <span class="arrow-right iconfont icon-iconfontright"></span>
            </li>
            <li @click="logout">
                <span class="icon-type iconfont icon-iconfonticon2"></span>
                安全退出
                <span class="arrow-right iconfont icon-iconfontright"></span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router';
// import { ref } from 'vue';
const router = useRouter();
var { id, role_id, avatar, phone, bus_title, name } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}')
const goPersonInfo = () => {
    router.push('/personInfo')
}
// 安全退出
const logout = () => {
    showConfirmDialog({
        title: '确认提示',
        message:
            '确认退出?',
    })
        .then(() => {
            // on confirm
            // 1-移除本地存储中的登录信息
            localStorage.removeItem('userLoginInfo');
            // 2-自动跳转到登录页面
            router.replace('/login');
        })
        .catch(() => {
            // on cancel
        });

}
</script>
<style scoped lang="scss">
.my {
    background-color: #f3f3f3;

    .my-row1 {
        display: flex;
        align-items: top;
        background-color: #fff;

        div {
            margin-left: 20px;
            flex: 1;
        }

        img {
            margin-left: 20px;
            margin-top: 20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    }

    .my-row2 {
        display: flex;
        margin: 10px 0;
        align-items: center;
        background-color: #fff;
        padding: 10px;

        li {
            flex: 1;
            text-align: center;
            border-right: 1px solid #F1F1F1;
        }

        .person-home {
            color: #333;
            text-decoration: none;
            border: 1px solid #EEE;
            border-radius: 20px;
            padding: 2px 4px;
        }
    }

    .my-row3 {
        padding: 0 20px;
        background-color: #fff;

        li {
            padding: 10px 0;
            position: relative;
            margin: 5px 0;
            border-bottom: 1px solid #eee;

            .icon-type {
                color: #25AFF3;
                margin-right: 10px;
            }

            .arrow-right {
                position: absolute;
                right: 0px;
                color: #999;
            }
        }
    }
}
</style>